<template>
    <div class="paiming">
        <ModalTitle :title="type == '1' ? '重点事件TOP10' : '各中队执法效能TOP6'">
            <TimeTab @timeReturnFn="timeReturnFn" />
        </ModalTitle>

        <Proportion class="proportion-box" @timeReturnFn="proportionFn" v-if="type == '2'" :timeList="timeList"
            :width="75" />

            <div class="paiming-box">
            <div class="paiming-box-list" v-for="(item, index) in    dataList   " :key="index + 'a'">
                <span>{{ item.title }}</span>
                <div>
                    <p :style="{ width: item.pro }"></p>
                </div>
                <span>{{ item.num }}</span>
            </div>
        </div>
    </div>
</template>

<script>
import TimeTab from '@/components/TimeTab/Index.vue'
import ModalTitle from '@/components/ModalTitle/Index.vue'
import Proportion from '@/components/Proportion/Index.vue'
import { ZongHeZhiFaZhuanTi } from '@/api/zhangzi'

export default {
    props: {
        type: {
            type: String,
            default: '1'
        }
    },
    components: {
        TimeTab,
        ModalTitle,
        Proportion
    },

    data() {
        return {
            timeList: [
                {
                    title: '上报事件量',
                    value: 1,
                },
                // {
                //     title: '人员绩效',
                //     value: 2,
                // },
            ],
            dataList: [],
            timeType: 0
        }
    },

    mounted() {
        if (this.type == '1') {
            this.zhongDianShiJianFn();
        } else {
            this.zhiFaXiaoNengFn()
        }
    },

    methods: {
        timeReturnFn(e) {
            this.timeType = e.value
            if (this.type == '1') {
                this.zhongDianShiJianFn();
            } else {
                this.zhiFaXiaoNengFn()
            }
        },

        proportionFn(val) {
            if (val.value == 1) {
                this.zhiFaXiaoNengFn()
            } else {
                this.renyuanjixiaoFn()
            }
        },
        // 重点事件TOP10
        zhongDianShiJianFn() {
            ZongHeZhiFaZhuanTi.keyEvents({
                dateType: this.timeType
            }).then(({ success, data, message }) => {
                if (success) {
                    let total = data.reduce((total, item) => {
                        return total + item.sum
                    }, 0)
                    let arr = []
                    for (let i = 0; i < data.length; i++) {
                        arr.push({
                            title: data[i].type,
                            pro: (data[i].sum / total) * 100 + '%',
                            num: data[i].sum
                        })
                    }
                    this.dataList = arr
                } else {
                    this.$message.error(message)
                }
            })
        },
        // 各中队执法效能TOP10   上报事件量列表
        zhiFaXiaoNengFn() {
            ZongHeZhiFaZhuanTi.enforcementEffectiveness({
                dateType: this.timeType
            }).then(({ success, data, message }) => {
                if (success) {
                    let total = data.reduce((total, item) => {
                        return total + item.sum
                    }, 0)
                    let arr = []
                    for (let i = 0; i < data.length; i++) {
                        arr.push({
                            title: data[i].name,
                            pro: (data[i].sum / total) * 100 + '%',
                            num: data[i].sum
                        })
                    }
                    this.dataList = arr
                } else {
                    this.$message.error(message)
                }
            })
        },
        // 各中队执法效能TOP10    人员绩效列表
        async renyuanjixiaoFn() {
            const { success, data, message } = await ZongHeZhiFaZhuanTi.PersonnelPerformanceAPI({
                dateType: this.timeType
            })
            if (success) {
                let total = data.reduce((total, item) => {
                    return total + item.sum
                }, 0)
                let arr = []
                for (let i = 0; i < data.length; i++) {
                    arr.push({
                        title: data[i].name,
                        pro: (data[i].sum / total) * 100 + '%',
                        num: data[i].sum
                    })
                }
                this.dataList = arr
            } else {
                this.$message.error(message)
            }
        }
    }
}
</script>

<style lang="less" scoped>
.paiming {
    width: 100%;
    height: 340px;
    margin-bottom: 2rem;

    .proportion-box {
        justify-content: flex-end;
        margin-top: 1rem;
    }

    .paiming-box {
        width: 100%;
        height: calc(100% - 80px);
        margin-top: 1.6rem;
        overflow: auto;

        .paiming-box-list {
            width: 100%;
            display: flex;
            align-items: center;
            justify-content: space-between;
            margin-bottom: 0.5rem;

            &:nth-child(1) {
                div {
                    p {
                        background: #FF5A3A;
                    }
                }
            }

            &:nth-child(2) {
                div {
                    p {
                        background: #FFC03A;
                    }
                }
            }

            &:nth-child(3) {
                div {

                    p {
                        background: #53E1FF;
                    }
                }
            }

            span {
                display: inline-block;
                font-family: PingFangSC-Regular, PingFang SC;
                font-weight: 400;
                color: #92ACBA;
                line-height: 3rem;

                &:nth-child(1) {
                    // margin-top: 1.5rem;
                    font-size: 1.4rem;
                    width: 7rem;
                }

                &:nth-child(3) {
                    font-size: 1.6rem;
                    width: 2rem;
                }
            }

            div {
                flex: 1;
                height: 1.5rem;
                background: rgba(0, 140, 227, 0.1);
                margin: 0 2rem;

                p {
                    // width: 80%;
                    height: 100%;
                    background: #008CE3;
                }
            }
        }
    }
}
</style>